import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Hotline extends React.Component {
  static defaultProps = {
    dataSource: {},
    columns: [],
    valField: 'val'
  }

  render() {
    const { columns, className, dataSource, valField } = this.props;
    return (
      <div className={`${styles.Basic} clearfix`}>
      {
        columns.map((ele,index) =>{
          try{
            const { icon, field, label } = ele;
            return (
            <div key={index} className={`${styles.items} ${styles[className]}`}>
              {icon ? <><div className={styles.icon}><Iconfont type={icon} /></div><div className={styles.back}><Iconfont type={icon} /></div></>: null}
              <div className={styles.inner}>
              <div className={styles.num}>
                <div className={styles.text}>{label}</div>
                {dataSource[field] ? (dataSource[field][valField] || dataSource[field][valField] === 0 ? dataSource[field][valField] : '--'): '--'}</div>
              </div>
            </div>)
          }catch(error){
            console.log(error)
          }
        })
      }
    </div>
    );
  }
}

Hotline.propTypes = {
  cloumn: PropTypes.object,
  icon: PropTypes.string,
}

export default Hotline;